<template>
  <view class="uni-tabbar">
    <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index"  :style="'width:'+ item.width">
		<view v-if="item.className">
			<view class="uni-tabbar__bd relative" @click="changeTab(item)">
				<view :class="item.className">
					<view class="inner">
						<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else :class="{'active': item.pagePath == pagePath}">
		<!--<view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>-->
			<view class="uni-tabbar__bd" @click="changeTab(item)">
				<view class="uni-tabbar__icon">
					<!-- 
					<image v-if="item.pagePath == pagePath && item.selectedIconPath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath" />
					<image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath" /> 
					-->
					<text :class="item.iconStyle" class="fa" :style="'font-size:'+item.iconSize"> </text>
				</view>
			</view>
			<view class="uni-tabbar__label" >
				{{item.text}}
			</view>
       </view>
    </view>
  </view>
</template>

<script setup>	
	import { onLoad, onShow } from "@dcloudio/uni-app";

	const props = defineProps({
		pagePath: null,
		pageModel: null,
	});
	
	const source = '';
	
	const changeTab = (item) => {
		if(item.type === 'page'){
			if( props.pagePath != item.pagePath){
				uni.navigateTo({
					url: item.pagePath + '?source=' + source
				});
			}
		} else {
			console.log(item.type);
			uni.showModal({
				title: '',
				content: '栏目建设中~',
				showCancel: false,
				success: function(event) {  
					
				}  
			});
		}
	}
	
	const page = 'home-tabbar';
	const showPage = false;
	const containerHeight = 400;
	
	const tabbar = [
		{
			type: 'page',
			width: '19%',
			pagePath: '/pages/mall/index',
			iconStyle: 'fa fa-home',
			iconSize: '48upx',
			//iconPath: '/static/tabbar/home.png',
			//selectedIconPath: '/static/tabbar/home-cur.png',
			text: '首页'
		},
		{
			type: 'page',
			width: '19%',
			pagePath: '/pages/mall/category',
			iconStyle: 'fa-institution',
			iconSize: '40upx',
			//iconPath: '/static/tabbar/store.png',
			//selectedIconPath: '/static/tabbar/store-cur.png',
			text: '商城'
		},		
		{
			type: 'page',
			width: '19%',
			pagePath: '/pages/mall/cart',
			iconStyle: 'fa-cart-plus',
			//iconPath: '/static/tabbar/my.png',
			iconSize: '46upx',
			//selectedIconPath: '/static/tabbar/my-cur.png',
			text: '购物车'
		},
		{
			type: 'page',
			width: '19%',
			pagePath: '/pages/member/main',
			iconStyle: 'fa-user-circle-o',
			iconSize: '42upx',
			//iconPath: '/static/tabbar/user.png',
			//selectedIconPath: '/static/tabbar/user-cur.png',
			text: '我的'
		}
	];
	
</script>

<style>
	
.uni-tabbar {
	position: fixed;
	bottom: 0;
	z-index: 9999;
	width: 100%;
	display: flex;
	justify-content: space-around;
	height: 110upx;
	padding-top: 15upx;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
}	
.uni-tabbar .uni-tabbar__item {
	display: block;
	line-height: 24upx;
	font-size: 30upx;
	text-align: center;
}
.uni-tabbar .uni-tabbar__item button{
	background-color: transparent;
	border: none;
}
.uni-tabbar .uni-tabbar__item .uni-tabbar__icon {
	height: 50upx;
	text-align: center;
}
.uni-tabbar .uni-tabbar__item .uni-tabbar__icon image{
	width: 50upx;
	height: 50upx;
}
.uni-tabbar .uni-tabbar__item .icon {
	display: inline-block;
}
.uni-tabbar .uni-tabbar__item .uni-tabbar__label {
    font-size: 28upx;
    color: #000;
 }
.uni-tabbar .uni-tabbar__item .active .uni-tabbar__bd,
.uni-tabbar .uni-tabbar__item .active .uni-tabbar__label {
    color: #ff0000;
}
.centerRadius{
	position: absolute;
	left: 12%;
	top: -45upx;
	width: 140upx;
	height: 140upx;
	border-radius: 70upx;
	background: #fff;
}
.centerRadius .inner{
	width: calc(100% - 30upx);
	height: calc(100% - 30upx);
	margin: 15upx;
	border-radius: 55upx;
	background: #ff0000;
	text-align: center;
	vertical-align: middle;
}

.centerRadius .uni-tabbar__label{
	width: 100upx;
	height: 100upx;
	display: inline-block;
	color: #fff !important;
	font-weight: bold;
	font-size: 28upx  !important;
	letter-spacing: 6upx;
	line-height: 125% !important;
	background-color: #ff0000;
	background-size: 100% 100%;
	background-position: center center;
}
.relative {
	position: relative;
}
</style>